<template>
    <div class="scada-gallery">
        <el-row :gutter="16">
            <el-col :span="5">
                <el-card>
                    <el-menu class="menu-wrap" :default-active="categoryTypes[0] && categoryTypes[0].dictValue">
                        <el-submenu index="1">
                            <template slot="title">
                                <div class="submenu-title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{ $t('scada.gallery.309456-0') }}</span>
                                </div>
                            </template>
                            <el-menu-item v-for="item in categoryTypes" :key="item.dictValue" :index="item.dictValue" :label="item.dictLabel" :value="item.dictValue" @click="handleTypeClick(item.dictValue)">
                                {{ item.dictLabel }}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-card>
            </el-col>

            <el-col :span="19">
                <el-card v-show="showSearch" class="search-card">
                    <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="search-form">
                        <el-form-item prop="fileName">
                            <el-input v-model="queryParams.fileName" :placeholder="$t('scada.gallery.309456-2')" clearable @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <div style="float: right">
                            <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('search') }}</el-button>
                            <el-button icon="el-icon-refresh" @click="handleResetQuery">{{ $t('reset') }}</el-button>
                        </div>
                    </el-form>
                </el-card>

                <el-card>
                    <el-row :gutter="10" style="margin-bottom: 10px">
                        <el-col :span="1.5">
                            <el-upload
                                ref="upload"
                                :action="upload.uploadUrl"
                                :headers="upload.headers"
                                :before-upload="beforeUpload"
                                :limit="500"
                                :on-success="handleAvatarSuccess"
                                :show-file-list="false"
                                :file-list="upload.imageList"
                                multiple
                            >
                                <el-button type="primary" plain size="small" @click="handleUploadFile">
                                    <i class="el-icon-upload2 el-icon--right" v-hasPermi="['scada:gallery:add']" />
                                    {{ $t('scada.gallery.309456-3') }}
                                </el-button>
                            </el-upload>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button plain icon="el-icon-edit" size="small" :disabled="single" @click="handleEdit" v-hasPermi="['scada:gallery:edit']">{{ $t('update') }}</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['scada:gallery:remove']">{{ $t('del') }}</el-button>
                        </el-col>
                        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                    </el-row>

                    <div class="content-wrap">
                        <el-row :gutter="12" v-loading="loading">
                            <el-checkbox-group class="img-box-wrap" v-if="total !== 0" v-model="checkImages" @change="checkboxChange">
                                <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 12px" v-for="item in galleryList" :key="item.id">
                                    <el-card class="img-card" :body-style="{ padding: 0 }">
                                        <img class="img" :src="baseApi + item.resourceUrl" />
                                        <div class="name-wrap">
                                            <span>{{ item.fileName }}</span>
                                        </div>
                                        <el-checkbox class="checkbox" :label="item.id" :key="item.id">
                                            <span v-show="false">{{ $t('scada.gallery.309456-4') }}</span>
                                        </el-checkbox>
                                    </el-card>
                                </el-col>
                            </el-checkbox-group>
                        </el-row>
                        <el-empty :description="$t('noData')" v-if="total == 0"></el-empty>
                        <pagination
                            style="margin: 0 0 20px 0"
                            v-show="total > 0"
                            :total="total"
                            :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize"
                            @pagination="getList"
                            :page-sizes="[28, 56, 84]"
                            :page-size="5"
                        />
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 修改文件 -->
        <DetailDialog ref="detailDialog" :id="fileId" @save="handleDialogSave"></DetailDialog>
    </div>
</template>

<script>
import DetailDialog from './detail-dialog.vue';
import { getDicts } from '@/api/system/dict/data';
import { listGallery, delGallery } from '@/api/scada/gallery';
import { getToken } from '@/utils/auth';

export default {
    name: 'Gallery',
    components: { DetailDialog },
    data() {
        return {
            baseApi: process.env.VUE_APP_BASE_API,
            loading: true, // 遮罩层
            categoryTypes: [], // 种类类型
            showSearch: true, // 显示搜索条件
            single: true, // 非单个禁用
            multiple: true, // 非多个禁用
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 28,
                categoryName: '',
                fileName: '',
                deptIdStrs: null,
                moduleGuid: this.$t('scada.gallery.309456-5'),
                resourceUrl: null,
                orderByColumn: 'id',
                isAsc: 'desc',
            },
            galleryList: [], // 图库管理表格数据
            total: 0, // 总条数
            upload: {
                headers: { Authorization: 'Bearer ' + getToken() }, // 设置上传的请求头部
                uploadUrl: '', // 上传的地址
                imageList: [],
            },
            checkImages: [], // 选中图标
            fileId: null, // 文件id
            ids: [], // 选中数组
        };
    },
    mounted() {
        // 获取数据
        this.getDatas();
    },
    methods: {
        async getDatas() {
            const dictType = 'scada_gallery_type';
            const { data } = (await this.getCategoryTypes(dictType)) || [];
            this.categoryTypes = data;
            this.queryParams.categoryName = data[0].dictValue;
            this.getList();
        },
        // 获取种类
        getCategoryTypes(dictType) {
            return new Promise((resolve, reject) => {
                getDicts(dictType)
                    .then((res) => {
                        resolve(res);
                    })
                    .catch((error) => {
                        reject(error);
                    });
            });
        },
        getList() {
            this.loading = true;
            listGallery(this.queryParams).then((response) => {
                if (response.code === 200) {
                    this.galleryList = response.rows;
                    this.total = response.total;
                    this.checkImages = [];
                }
                this.loading = false;
            });
        },
        // 搜索按钮操作
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 重置按钮操作
        handleResetQuery() {
            this.resetForm('queryForm');
            this.handleQuery();
        },
        // 种类类型选择
        handleTypeClick(type) {
            this.queryParams.pageNum = 1;
            this.queryParams.categoryName = type;
            this.checkImages = [];
            this.single = true;
            this.multiple = true;
            this.getList();
        },
        // 选中后
        checkboxChange(selection) {
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        // 上传
        handleUploadFile(file) {
            this.upload.uploadUrl = this.baseApi + '/scada/gallery/uploadFile' + '?categoryName=' + this.queryParams.categoryName;
        },
        beforeUpload(file) {
            if (this.queryParams.categoryName == '') {
                this.$message({
                    message: this.$t('scada.gallery.309456-6'),
                    type: 'warning',
                });
                this.$refs.upload.abort();
                return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 20;
            if (!isLt2M) {
                this.$message.error(this.$t('scada.gallery.309456-7'));
            }
            return isLt2M;
        },
        handleAvatarSuccess(res, file) {
            if (res.code == 200) {
                this.$message.success(this.$t('uploadSuccess'));
                this.$refs.upload.clearFiles();
                this.getList();
            } else {
                this.$message.error(res.msg);
            }
        },
        // 编辑
        handleEdit(row) {
            this.fileId = row.id || this.checkImages[0];
            this.$refs.detailDialog.open = true;
        },
        handleDialogSave() {
            this.getList();
        },
        // 删除按钮操作
        handleDelete() {
            const ids = this.checkImages;
            this.$confirm(this.$t('scada.gallery.309456-9'), this.$t('scada.gallery.309456-10'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning',
            })
                .then(function () {
                    return delGallery(ids);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess(this.$t('delSuccess'));
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.scada-gallery {
    padding: 20px;

    .menu-wrap {
        height: 1003px;
        overflow-x: hidden;
        overflow-y: auto;

        .submenu-title {
            padding: 0;
        }
    }

    .search-card {
        margin-bottom: 15px;
        padding: 3px 0;
    }

    .search-form {
        margin-bottom: -22.5px;
    }

    .content-wrap {
        padding: 0px;

        .img-box-wrap {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border-radius: 10px;
            align-content: center;
            padding: 0;
            margin-top: 10px;

            .img-card {
                height: auto;
                text-align: center;
                padding: 10px;
                position: relative;
                background: #ffffff;
                border-radius: 8px;
                border: 1px solid #dcdfe6;

                .img {
                    width: 100px;
                    height: 100px;
                    margin-top: 5px;
                }

                .name-wrap {
                    text-align: center;
                    font-size: 11px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 10px;
                }

                .checkbox {
                    position: absolute;
                    top: 8px;
                    right: 0px;
                }
            }
        }
    }
}

::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

::-webkit-scrollbar-track {
    background-color: #ddd;
}

.el-menu {
    border-right: none;
}
</style>
